<template>
  <div class="item-detail">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="item" class="detail-container">
      <div class="detail-header">
        <button @click="$router.go(-1)" class="back-btn">← 返回</button>
        <h1 class="item-title">{{ item.title }}</h1>
      </div>
      
      <div class="detail-content">
        <div class="detail-image" :class="`image-${item.image}`"></div>
        
        <div class="detail-info">
          <div class="price-section">
            <div class="price">¥{{ item.price }}</div>
            
          </div>
          
          <div class="info-section">
            <h3>商品描述</h3>
            <p>{{ item.description }}</p>
          </div>
          
          <div class="info-section">
            <h3>卖家信息</h3>
            <p><strong>卖家：</strong>{{ item.seller }}</p>
            <p><strong>联系方式：</strong>{{ item.contact }}</p>
          </div>
          
          <div class="info-section">
            <h3>商品详情</h3>
            <p><strong>分类：</strong>{{ item.category }}</p>
            <p><strong>发布时间：</strong>{{ item.publishDate }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="not-found">
      <h2>商品不存在</h2>
      <router-link to="/" class="btn btn-primary">返回首页</router-link>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const itemId = route.params.id
    const item = ref(null)
    const loading = ref(true)
    
    // 模拟从API获取数据
    const fetchItem = () => {
      setTimeout(() => {
        const items = [
          { 
            id: 1, 
            title: '高等数学教材', 
            price: 25, 
            image: 'book', 
            category: '教材书籍',
            description: '几乎全新，无笔记痕迹。包含教材和习题集，适合大一学生使用。',
            seller: '张同学',
            contact: '123456',
            publishDate: '2025-07-18'
          },
          { 
            id: 2, 
            title: '二手笔记本电脑', 
            price: 1200, 
            image: 'laptop', 
            category: '电子数码',
            description: '联想小新，i5处理器，8G内存，256G固态硬盘，使用两年，外观良好，功能正常，无维修记录。',
            seller: '李同学',
            contact: '456789',
            publishDate: '2025-07-18'
          },
          { 
            id: 3, 
            title: '篮球', 
            price: 50, 
            image: 'basketball', 
            category: '体育用品',
            description: '斯伯丁篮球，使用半年，保存完好，无漏气现象。',
            seller: '王同学',
            contact: '789456',
            publishDate: '2025-07-18'
          },
          { 
            id: 4, 
            title: '台灯', 
            price: 30, 
            image: 'lamp', 
            category: '生活用品',
            description: 'LED护眼台灯，可调节亮度，三种色温模式，使用一年。',
            seller: '赵同学',
            contact: '456123',
            publishDate: '2025-07-18'
          }
        ]
        
        const foundItem = items.find(i => i.id === parseInt(itemId))
        item.value = foundItem || null
        loading.value = false
      }, 500)
    }
    
    onMounted(fetchItem)
    
    return {
      item,
      loading
    }
  }
}
</script>

<style scoped>
.item-detail {
  padding-bottom: 40px;
}

.loading, .not-found {
  text-align: center;
  padding: 50px;
  font-size: 1.2rem;
}

.detail-header {
  margin-bottom: 30px;
  position: relative;
  text-align: center;
}

.back-btn {
  position: absolute;
  left: 0;
  top: 10px;
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 10px;
}

.back-btn:hover {
  text-decoration: underline;
}

.item-title {
  font-size: 1.8rem;
  color: var(--primary-color);
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.detail-image {
  height: 400px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.image-book {
  background-color: #e3f2fd;
  background-image: url("../images/1.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-laptop {
  background-color: #e8f5e9;
  background-image: url("../images/2.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-basketball {
  background-color: #fff3e0;
  background-image: url("../images/3.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-lamp {
  background-color: #fff8e1;
  background-image: url("../images/4.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.detail-info {
  background: white;
  padding: 25px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.price {
  font-size: 2rem;
  color: var(--secondary-color);
  font-weight: bold;
}

.contact-btn {
  padding: 10px 25px;
  font-size: 1.1rem;
}

.info-section {
  margin-bottom: 25px;
}

.info-section h3 {
  margin-bottom: 15px;
  color: var(--primary-color);
  font-size: 1.3rem;
}

.info-section p {
  margin-bottom: 8px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .detail-content {
    grid-template-columns: 1fr;
  }
  
  .detail-image {
    height: 300px;
  }
}
</style>